<template>
  <div class="ypMain">
    <form class="formData">
      <div class="formItem">
        <label>招聘标题:</label>
        <input class="inputText" type="text" :value="info.title" disabled />
      </div>
      <div class="formItem">
        <label>职位:</label>
        <input class="inputText" type="text" v-model="info.member" />
      </div>
      <div class="formItem">
        <label>应聘时间:</label>
        <input class="inputText" type="date" v-model="info.time" />
      </div>
      <div class="formItem">
        <label>账号:</label>
        <input class="inputText" type="text" v-model="info.username" />
      </div>
      <div class="formItem">
        <label>姓名:</label>
        <input class="inputText" type="text" v-model="info.name" />
      </div>
      <div class="formItem">
        <label>手机:</label>
        <input
          class="inputText"
          type="text"
          v-model="info.phone"
          maxlength="11"
        />
      </div>
      <div class="formItem">
        <div style="border: 1px solid #ccc;">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 300px; overflow-y: hidden"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
          />
        </div>
      </div>
      <div class="btnBox">
        <input type="button" value="提交" @click="submitBtn"/>
      </div>
    </form>
  </div>
</template>
<script>
import Vue from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  data() {
    return {
      info: {
        title: JSON.parse(this.$route.query.title),
        member: "",
        time: "",
        username: "",
        name: "",
        phone: "",
      },
      editor: null,
      html: "<p></p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入应聘原因..." },
      mode: "default", // or 'simple'
    };
  },
  components: { Editor, Toolbar },
  created() {},
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    submitBtn(){
      alert(`已提交`)
    }
  },
};
</script>

<style lang="less" scoped>
.ypMain {
  background-color: #f1f1f1;
  height: 100%;
  .formData {
    width: 50%;
    height: 155%;
    margin: 20px auto 0;
    background-color: #fff;
    padding: 20px;
    box-shadow: 9px 0px 5px rgb(126, 224, 237);

    .formItem {
      box-shadow: -9px -9px 5px rgb(126, 224, 237);
      margin: 18px 0px;
      padding: 20px;
      display: flex;
      label {
        flex: 0.15;
        text-align: right;
        margin: 0px 30px 0 0;
      }
      .inputText {
        flex: 0.85;
        border: none;
        outline: none;
        padding-left: 3px;
        letter-spacing: 1.5px;
        border-bottom: 1px silver solid;
      }
    }
    .btnBox {
      display: flex;
      justify-content: center;
      input {
        padding: 8px 40px;
        border-radius: 9px;
        outline: none;
        border: none;
        font-size: 18px;
        background-color: white;
        border: 2px solid cadetblue;
      }
      input:hover {
        background-color: cadetblue;
        color: #fff;
      }
    }
  }
}
</style>